<template>
	<view class="content">
	 <view class="swiper-content">
          <u-swiper :list="list2" indicator indicatorMode="line" circular height="200px"></u-swiper>
     </view>
	 <view class="notify">
		<u-notice-bar :text="text1"></u-notice-bar>
	  </view>
	  <view class="container">
        <view class="container-item">电影区</view>
		<view class="container-item">视频区</view>
		<view class="container-item">电影区</view>
		<view class="container-item">视频区</view>
		<view class="container-item">电影区</view>
		<view class="container-item">视频区</view>
		<view class="container-item">电影区</view>
		<view class="container-item">视频区</view>
		<view class="container-item">电影区</view>
		<view class="container-item">视频区</view>
		<view class="container-item">电影区</view>
		<view class="container-item">视频区</view>
	  </view>
	  <view class="home_list">
		  <view class="home-list-item">
			  <view class="home-list-header">
				  <text class="span">最新剧情</text> 
				  	<u-link class="right" href="https://uviewui.com" text="查看更多 " color="#666" fontSize="12px"></u-link>
			  </view>
		   <view class="video-list" >
			   <view class="video-item" v-for="(item,index) in list" :key="index">
				   <view class="poster-img">
				    	<u--image :src="item.url"  :lazy-load="true"   width="100%"></u--image>
				   </view>
				   <view class="video-title">
				   	{{item.title}}
				   </view>
				   <view class="video-item-date">
				   	{{item.date}}
				   </view>
			   </view>
		   </view>			
		  </view>
	  </view>
  </view>
</template>

<script>

	export default {
		data() {
			return {
			        list2: [
			          {
			            url: "https://cms-bucket.ws.126.net/2021/0220/517f7bb1j00qotenn0067c000o4009kc.jpg"
			          },
			          {
			            url: "https://cms-bucket.ws.126.net/2021/0220/517f7bb1j00qotenn0067c000o4009kc.jpg"
			          },
			          {
			            url: "https://cms-bucket.ws.126.net/2021/0220/517f7bb1j00qotenn0067c000o4009kc.jpg"
			          },
			        ],
					text1:"uView UI众多组件覆盖开发过程的各个需求，组件功能丰富，多端兼容。让您快速集成，开箱即用",
					list:[
						{
							id:1,
						    url: "https://cms-bucket.ws.126.net/2021/0220/517f7bb1j00qotenn0067c000o4009kc.jpg",
							title:"测试",
						    date:"2025-06-07"
						},
						{
							id:2,
						    url: "https://cms-bucket.ws.126.net/2021/0220/517f7bb1j00qotenn0067c000o4009kc.jpg",
							title:"测试",
						    date:"2025-06-07"
						},
						{
							id:3,
						    url: "https://cms-bucket.ws.126.net/2021/0220/517f7bb1j00qotenn0067c000o4009kc.jpg",
							title:"测试",
						    date:"2025-06-07"
						},
						{
							id:4,
						    url: "https://cms-bucket.ws.126.net/2021/0220/517f7bb1j00qotenn0067c000o4009kc.jpg",
							title:"测试",
						    date:"2025-06-07"
						},
						{
							id:5,
					        url: "https://cms-bucket.ws.126.net/2021/0220/517f7bb1j00qotenn0067c000o4009kc.jpg",
							title:"测试",
						    date:"2025-06-07"
						},
						{
							id:6,
					        url: "https://cms-bucket.ws.126.net/2021/0220/517f7bb1j00qotenn0067c000o4009kc.jpg",
							title:"测试",
						    date:"2025-06-07"
						},
						{
							id:7,
					        url: "https://cms-bucket.ws.126.net/2021/0220/517f7bb1j00qotenn0067c000o4009kc.jpg",
							title:"测试",
						    date:"2025-06-07"
						},
						{
							id:8,
						    url: "https://cms-bucket.ws.126.net/2021/0220/517f7bb1j00qotenn0067c000o4009kc.jpg",
							title:"测试",
						    date:"2025-06-07"
						},
					],
			      }
		},
		onLoad() {

		},
		onNavigationBarButtonTap(e) {
		   uni.showActionSheet({
		         itemList: ['简体中文', 'English'],
		         success: (res) => {
		           const lang = res.tapIndex === 0 ? 'zh-CN' : 'en-US';
		           uni.setStorageSync('locale', lang);
		           this.$i18n.locale = lang
		         }
		       });
		  },
		methods: {

		}
	}
</script>

<style>
.content {
       margin: 12px 12px 0 12px;
}
.notify {
  display: flex;
  align-items: center;
  margin-top:5px;
  width:100%;
}

.container {
	margin: 12px 12px 0 12px;
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    background-color: #22A931;
    margin: 16px 0 0 0;
    border-radius: 6px;
    padding: 6px 0;
}
.container-item {
    padding: 6px 20px;
    cursor: pointer;
    font-size: 16px;
    font-weight: 500;
    color: #ffffff;
}
.home-list {
  padding-top: 12px;
  padding-bottom: 12px;
}

.home-list-header {
  display: flex;
  align-items: center;
}

.home-list-header .span {
  font-size: 16px;
  color: #333;
  font-weight: 500;
  flex: 1;
}

.home-list-header .right {
  font-size: 12px;
  color: #666;
  display: flex;
  justify-content: flex-end;
}

.home-list-header a:hover {
  color: #22a931;
}

.home-list-header img {
  width: 8px;
  margin-left: 3px;
  justify-content: flex-start;
}

.video-list{
    display: flex;
    flex-direction: row;
	flex-wrap: wrap;
	justify-content: space-around;
	.video-item {
	 width: 48%;
	 padding:5px 0px;
	 .video-item-date {
	     font-size: 12px;
	     color: #999999;
	     margin-top: 6px;
	 }
	 .video-title {
	     font-size: 15px;
	     color: #666666;
	     margin-top: 8px;
	     overflow: hidden;
	     text-overflow: ellipsis;
	     white-space: nowrap;
	 }
	}
}
</style>
